<template>
	<view class="columnbox wdh-100 content">
		<view class="rowbox wdh-100 jus">
			<image src="/static/logo.png" mode="aspectFill" class="logo"></image>
		</view>
		<view class="title wdh-100">嘉医良方 欢迎您</view>
		<view class="rowbox one-info jus">
			<image src="/static/img/phone.png" mode="aspectFill"></image>
			<input class="phone-input" placeholder="请输入手机号" v-model="phone" />
		</view>
		<view class="rowbox one-info jus" style="margin-top: 40rpx;">
			<image src="/static/img/password.png" mode="aspectFill"></image>
			<input v-model="phonecode" class="code-input" placeholder="请输入验证码" />
			<view v-if="!codeflag" @click="getCode" class="rowbox def-bgcol code-box">获取验证码</view>
			<view class="rowbox def-bgcol code-box" v-else>{{codenum}}s</view>
		</view>
		<view class="rowbox wdh-100 reg-title" @click="toReg">立即注册</view>
		<view class="rowbox log-btn def-bgcol" @click="toLog">立即登录</view>
	</view>
</template>
<script>
	// 环信即时通讯
	import SDK from 'js_sdk/easemob-im-uni-app/Easemob-chat';
	// 实例化 SDK 对象
	const WebIM = wx.WebIM = SDK;
	export default {
		data() {
			return {
				phone: '',
				phonecode: '',
				// 验证码
				codeflag: false,
				codeinterval: null,
				codenum: 60,
				submitflag: false
			}
		},
		methods: {
			toLog() {
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				} else if (this.phonecode == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				} else {
					if (!this.submitflag) {
						// #ifdef MP
						this.subscribeMessage()
						// #endif
						this.submitflag = true
						uni.showLoading({
							title: '正在登录'
						})
						this.$req.post('/doctor/doctorlogin', {
							phone: this.phone,
							phonecode: this.phonecode
						}).then(res => {
							uni.hideLoading()
							if (res.data.code == 0) {
								this.$store.dispatch('actionsHandleUserInfoChange', res.data.data);
								this.$store.dispatch('actionsHandleIsLoginChange', true);
								uni.setStorageSync('userinfo', res.data.data)
								uni.setStorageSync('uid', res.data.data.id)
								uni.setStorageSync('memberid', res.data.data.memberid)
								this.logEasemob()
								uni.navigateBack()
							} else {
								this.submitflag = false
								uni.showModal({
									title: res.data.msg
								})
							}
						})
					}
				}
			},
			// 登录环信即时通讯
			logEasemob() {
				this.$req.post('/chat/userToken', {
					memberid: uni.getStorageSync('memberid')
				}).then(res => {
					getApp().globalData.conn
						.registerUser({
							/** 用户 ID。 */
							username: uni.getStorageSync('memberid'),
							/** 密码。 */
							password: uni.getStorageSync('memberid')
						}).then((res) => {});
					// 登录
					setTimeout(() => {
						getApp().globalData.conn
							.open({
								user: uni.getStorageSync('memberid') + '',
								accessToken: res.data.data,
							})
							.then(() => {
								console.log("========login success");
								// 登录状态
							})
							.catch((reason) => {
								console.log("=======login fail", reason);
							});
					}, 1000)
				})

			},

			subscribeMessage() {
				uni.getSetting({
					withSubscriptions: true,
					success(res) {
						if (!res.subscriptionsSetting.mainSwitch) {
							// uni.openSetting({
							// 	success(res) {
							// 		console.log('打开设置页', res.authSetting);
							// 	}
							// })
						} else {
							uni.requestSubscribeMessage({
								tmplIds: [
									'YwV142WUaUgzHGydvcYzbo81GIodj4VDhBTwBZsrt08',
									'3iPnVhnimxBZO6veDGvT_CEV8OGxR7LKHdJyqTkWGxI'
								],
								success(res) {
									console.log('requestSubscribeMessage 订阅信息', res);
									if (res['YwV142WUaUgzHGydvcYzbo81GIodj4VDhBTwBZsrt08'] ==
										"accept") { // 用户点击确定后
										console.log('用户订阅点击确定按钮');
										// 后端接口
									} else {
										console.log('拒绝，不会再弹出弹框 只能去设置页');
										uni.showModal({
											title: '您未开启消息订阅',
											content: '为了给您提供更好的服务，请您授权消息订阅',
											success: res2 => {
												if (res2.confirm) {
													uni.openSetting({
														success(res) {
															console.log('打开设置页', res
																.authSetting);
														}
													})
												} else {
													console.log('决绝')
												}
											}
										})

									}
								},
								fail(errMessage) {
									console.log("订阅消息 失败 ", errMessage);
								},
								complete: errMessage => {
									
								}
							})
						}
					},
				})
			},

			toReg() {
				uni.navigateTo({
					url: '/packageA/reg/reg'
				})
			},
			getCode() {
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				} else {
					this.codeflag = true
					this.codeinterval = setInterval(() => {
						if (this.codenum > 0) {
							this.codenum--
						} else {
							clearInterval(this.codeinterval)
							this.codeflag = false
							this.codenum = 60
						}
					}, 1000)
					this.$req.post('/doctor/phonecode', {
						phone: this.phone
					}).then(res => {
						uni.showToast({
							title: '验证码已发送',
							icon: 'none'
						})
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		padding: 100rpx 65rpx;
	}

	.logo {
		width: 114rpx;
		height: 114rpx;
		border-radius: 10rpx;
	}

	.title {
		margin-top: 29rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #0E0E0E;
		margin-bottom: 140rpx;
	}

	.one-info {
		width: 100%;
		height: 105rpx;
		// box-shadow: 0px 2rpx 20rpx 0px #E6E8EE;
		border-radius: 10rpx;
		border: #E6E8EE solid 1px;
		padding: 0 32rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 32rpx;
		}
	}

	.phone-input,
	.code-input {
		font-size: 28rpx;
		color: #0E0E0E;
		font-family: PingFang SC;
		text-align: left;
		width: calc(100% - 120rpx);
		border-left: #C5CDD4 solid 1px;
		padding-left: 40rpx;
	}

	.code-input {
		width: calc(100% - 300rpx);
	}

	.code-box {
		margin-left: 20rpx;
		width: 174rpx;
		height: 65rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #fff;
		border-radius: 100rpx;
	}

	.reg-title {
		justify-content: flex-start;
		margin-top: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #00b6b2;
	}

	.log-btn {
		margin-top: 100rpx;
		width: 612rpx;
		height: 105rpx;
		border-radius: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #fff;
	}
</style>